<!DOCTYPE html>
<html>
<head>
    <title>Electron Scattering Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="400" height="350"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Drawing parameters ---
    const cx = 250;
    const cy = 170;
    const rayLength = 120;
    const angle = Math.PI / 4; // 45 degrees
    const wallHeight = 160;
    const arcRadius = 40;

    // --- General Style ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    
    // --- Draw Target/Wall ---
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(cx, cy - wallHeight / 2);
    ctx.lineTo(cx, cy + wallHeight / 2);
    ctx.stroke();
    
    // --- Draw Hatches on the Wall ---
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    for (let i = - (wallHeight / 2 - 8); i <= (wallHeight / 2 - 8); i += 10) {
        ctx.moveTo(cx, cy + i);
        ctx.lineTo(cx + 8, cy + i + 8);
    }
    ctx.stroke();
    
    // --- Draw Normal Line (dashed) ---
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.setLineDash([5, 4]);
    ctx.moveTo(cx - 100, cy);
    ctx.lineTo(cx + 50, cy);
    ctx.stroke();
    ctx.setLineDash([]); // Reset to solid line style
    
    // --- Draw Incoming Ray ---
    const startX_in = cx - rayLength * Math.cos(angle);
    const startY_in = cy - rayLength * Math.sin(angle);
    ctx.beginPath();
    ctx.moveTo(startX_in, startY_in);
    ctx.lineTo(cx, cy);
    ctx.stroke();
    
    // --- Draw Scattered Ray ---
    const endX_out = cx - rayLength * Math.cos(angle);
    const endY_out = cy + rayLength * Math.sin(angle);
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(endX_out, endY_out);
    ctx.stroke();

    // --- Draw filled circles on rays (representing electron path) ---
    const dotRadius = 3.5;
    // Dot on incoming ray (at ~60% of its length)
    const t_in = 0.6;
    const x_dot_in = (1 - t_in) * startX_in + t_in * cx;
    const y_dot_in = (1 - t_in) * startY_in + t_in * cy;
    ctx.beginPath();
    ctx.arc(x_dot_in, y_dot_in, dotRadius, 0, 2 * Math.PI);
    ctx.fill();
    
    // Dot on scattered ray (at ~40% of its length from the center)
    const t_out = 0.4;
    const x_dot_out = (1 - t_out) * cx + t_out * endX_out;
    const y_dot_out = (1 - t_out) * cy + t_out * endY_out;
    ctx.beginPath();
    ctx.arc(x_dot_out, y_dot_out, dotRadius, 0, 2 * Math.PI);
    ctx.fill();

    // --- Draw Angle Arcs ---
    ctx.lineWidth = 1;
    // Top arc for the angle of incidence
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, -angle, 0);
    ctx.stroke();
    // Bottom arc for the angle of reflection
    ctx.beginPath();
    ctx.arc(cx, cy, arcRadius, 0, angle);
    ctx.stroke();
    
    // --- Draw Angle Text ---
    ctx.font = '18px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Top angle text: 45°
    ctx.fillText('45°', cx - 35, cy - 22);
    
    // Bottom angle text: 45°
    ctx.fillText('45°', cx - 35, cy + 22);
    
    // --- Draw Labels ---
    // Label "v" for the incoming ray
    ctx.font = 'italic 20px sans-serif';
    ctx.fillText('v', startX_in, startY_in - 10);
    
    // Figure Caption
    ctx.font = '20px sans-serif';
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 3.27.', cx - 50, cy + 150);

</script>
</body>
</html>